<!-- 机械预定 -->
<template>
  <div class="MechanicalReservation">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="navbarList">
      <div class="titleName">机械类型:</div>
      <ul class="itemBox">
        <span
          class="allList"
          :class="{ activeClass: currentIndex1 == 1 }"
          @click="currentBtn1(currentIndex1 == 1)"
          >全部</span
        >
        <li
          class="itemList"
          :class="{ activeClass: currentIndex2 == item.id }"
          v-for="(item, index) of navbarList"
          :key="index"
          @mouseover="goMenu(item.menu, item.id)"
        >
          <!-- 一级类型 -->
          <div @click="allMechanicas(item.id)">{{ item.name }}</div>
          <!-- 二级类型 -->
          <div
            class="navbarList1"
            v-show="item.type_id == valueList"
            @mouseleave="outStyle"
          >
            <ul class="itemBox1">
              <li
                class="itemList1"
                v-for="(items, index) of item.menu"
                :key="index"
                :class="{ activeClass: currentIndex == items.id }"
                @click="currentBtn(items.id, items.id)"
              >
                {{ items.name }}
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <!-- 数据内容 -->
    <div class="container" v-loading="loading">
      <div class="mechanicasBox">
        <div
          class="mechanicasItem"
          v-for="(item, index) of mechanicaList"
          :key="index"
          @mouseover="hoverStyle(item.size_id)"
        >
          <img :src="item.icon_url" class="colorImg"/>
          <div class="mechanicaName">{{ item.name }}</div>
          <div
            :class="{ styleBg: item.size_id == hoverId }"
            @mouseleave="outhover"
          >
            <div
              :class="{ addCard: item.size_id == hoverId }"
              v-show="item.size_id == hoverId"
              @click="
                goDetailed(
                  item.name,
                  item.icon_url,
                  item.type_id,
                  item.size_id,
                  item.first_num,
                  item.rentUnit,
                  item.pid
                )
              "
            >
              加入清单
            </div>
            <div
              :class="{ offer: item.size_id == hoverId }"
              v-show="item.size_id == hoverId"
              @click="
                goOffer(
                  item.type_id,
                  item.name,
                  item.size_id,
                  item.first_num,
                  item.rentUnit,
                  item.pid
                )
              "
            >
              立即报价
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightNavBar1">
      <div class="rightTopStyle1">
        <div @click="goPhone" class="phoneBox">
          <img
            src="./../../../../assets/img/home/homePhoneIcon.png"
            class="homePhoneIcon"
          />
          <div>电话</div>
          <div v-show="isPhone" class="downPhone">
            <div class="phoneName">联系电话</div>
            <div class="phoneNum">4008-188-191</div>
          </div>
        </div>
        <div @click="goCart" class="ShoppingCart">
          <img
            src="./../../../../assets/img/home/homeShoppingIcon.png"
            class="homeShoppingIcon"
          />
          <div>清单车</div>
        <span class="countNum" v-if="goDetailedData?goDetailedData.length>=1:null">{{goDetailedData.length}}</span>
        </div>
        <div class="cartBox">
          <div @click="toCart">
            <img
              src="./../../../../assets/img/home/homeCartIcon.png"
              class="homeCartIcon"
            />
            <div>留言</div>
          </div>
        </div>
      </div>
      <!-- 回到顶部的按钮 -->
      <div class="rightBottomStyle1" v-show="gotop">
        <img
          src="./../../../../assets/img/home/homePositionIcon.png"
          class="homePositionIcon"
          @click="toTop"
        />
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import { getMenu, getThirdmenubypid } from "./../../../../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    NavBarHeader,
    FooterBar,
  },
  data() {
    // 这里存放数据
    return {
      currentIndex: "", //二级导航的样式索引
      currentIndex1: this.$route.query.num, //一级导航的全部索引
      valueList: -1, //一级导航的id
      hoverId: -1, // 列表id
      currentIndex2: this.$route.query.type_id ? this.$route.query.type_id : "",
      isPhone: false, // 电话
      gotop: false, // 回到顶部
      childrenList: [], //子级遍历的数据
      mechanicaList: [], // 列表数据
      navbarList: [],
      goDetailedData: [],
      myValue: [],
      typeBox: [],
      loading: true,
      userInfo: {},
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    goDetailedData: {
      // 默认写成函数，就相当于写了个handler(),deep:true,是否深度监控
      handler() {
        // localStorage 默认存的是字符串
        localStorage.setItem("listData", JSON.stringify(this.goDetailedData));
      },
      deep: true,
    },
  },
  // 方法集合
  methods: {
    unique(arr) {
      var newArr = [arr[0]];
      for (var i = 1; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    goMenu(key, value) {
      this.childrenList = key;
      this.valueList = value;
      // this.currentIndex = -1;
    },
    outStyle() {
      this.valueList = -1;
    },
    //二级数据类型
    currentBtn(key, index) {
      this.currentIndex = index;
      this.currentIndex1 = !1; //点击二级分类后消除全部选中样式
      this.currentIndex2 = this.valueList; //选中二级分类后一级分类点亮
      this.valueList = -1; //选中二级分类后关闭弹窗
      this.getThirdmenubypid(key, "");
    },
    // 一级菜单全部
    currentBtn1() {
      this.getThirdmenubypid("", -1);
      this.currentIndex2 = "";
      this.valueList = -1;
      this.currentIndex1 = 1;
    },
    // 列表鼠标滑入事件
    hoverStyle(key) {
      this.hoverId = key;
    },
    outhover() {
      this.hoverId = -1;
    },
    // 电话弹窗
    goPhone() {
      this.isPhone = !this.isPhone;
    },
    // 留言板
    toCart() {
      const shangQiaoButton = document.getElementById("nb_invite_ok");
      if (shangQiaoButton && shangQiaoButton.click) {
        shangQiaoButton.click();
      }
    },
    goCart() {
      this.$router.push({ path: "/MechanicalCart" });
    },
    handleScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 30) {
        this.gotop = true;
      } else {
        this.gotop = false;
      }
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    //  点击一级菜单选中
    allMechanicas(type_id) {
      this.currentIndex2 = this.valueList;
      this.currentIndex1 = "";
      this.getThirdmenubypid("", type_id);
    },
    // 去报价
    goOffer(typeId, typeName, sizeId, first_num, rentUnit, pid) {
      if (this.userInfo) {
        console.log(first_num);
        console.log(sizeId);
        let typeBox = [];
        typeBox.push(first_num, pid, sizeId);
        this.myValue.push({
          typeSize: typeBox,
          typeName: typeName,
          needId: typeId,
          number: 1,
          listData: rentUnit,
          unit: "",
        });
        this.$router.push({
          name: "MechanicalRent",
          params: { myValue: this.myValue },
        });
      } else {
        this.$router.push({ path: "/loginPc" });
      }
    },
    // 加入清单
    goDetailed(name, img, typeIid, sizeId, first_num, rentUnit, pid) {
      // 点击加入清单后添加到缓存里
      this.goDetailedData.push({
        name: name,
        img: img,
        type_id: typeIid,
        size_id: sizeId,
        first_num: first_num,
        listData: rentUnit,
        unit: "",
        pid: pid
      });

      this.$message.success("加入成功");
    },
    // 获取机械类型导航内容
    async getMenu() {
      try {
        let res = await getMenu();
        if (res.data.result == "1") {
          this.navbarList = res.data.body.types;
          console.log(res.data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取三级列表
    async getThirdmenubypid(oneId, typeId) {
      if (typeId == -1) {
        var data = {
          typeId: "",
          id: "",
        };
      } else {
        var data = {
          typeId: typeId ? typeId : this.$route.query.type_id || "",
          id: oneId ? oneId : "",
        };
      }
      try {
        let res = await getThirdmenubypid(data);
        if (res.data.result == "1") {
          this.mechanicaList = res.data.body.size;
          this.loading = false;
        }
      } catch (e) {
        this.loading = true;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenu();
    this.getThirdmenubypid();
    // 如果缓存之前有数据的话就继续往里添加新的数据
    if (JSON.parse(localStorage.getItem("listData"))) {
      this.goDetailedData =
        JSON.parse(localStorage.getItem("listData")) || this.goDetailedData;
    }
    this.userInfo = window.localStorage.getItem("userInfo");
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //此处true 需要加上 不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true); //移除监听事件
  }, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.MechanicalReservation {
  width: 100%;
  height: 100%;
  position: relative;
}
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.container {
  width: 1180px;
  margin: 50px auto 0 auto;
}
.navbarList {
  display: flex;
  justify-content: center;
  // width: 1180px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
  margin: 70px auto 0 auto;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eeeeee;
  li:hover {
    color: #ff855b;
    font-size: 16px;
  }
  span:hover {
    font-size: 16px;
    color: #ff855b;
  }
}
.navbarList1 {
  li:hover {
    color: #ff855b;
    font-size: 16px;
  }
}
.itemBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  width: 1080px;
}
.itemBox1 {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 146px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eeeeee;
  position: absolute;
  top: 28px;
  left: 0;
  z-index: 200;
}
.titleName {
  margin-top: 10px;
  margin-right: 30px;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}
.allList {
  font-size: 16px;
  color: #303133;
  margin-top: 10px;
  margin-right: 30px;
}
.itemList {
  position: relative;
  margin-right: 45px;
  font-size: 16px;
  color: #303133;
  margin-top: 10px;
  font-weight: 500;
}
.itemList1 {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  padding: 10px 5px;
}
.activeClass {
  color: #ff855b;
  font-size: 16px;
}
.items {
  display: flex;
  align-items: center;
}
.mechanicasItem {
  width: 270px;
  height: 347px;
  margin-bottom: 30px;
  margin-right: 25px;
  background: #fff;
  position: relative;
}
.mechanicasBox {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
}
.colorImg {
  width: 270px;
  height: 267px;
}
.mechanicaName {
  box-sizing: border-box;
  padding-top: 29px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.styleBg {
  width: 270px;
  height: 347px;
  background: rgba(28, 30, 43, 0.7);
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: all 0.8s;
}
.addCard {
  font-size: 14px;
  color: #fff;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #ff7d59;
  border-radius: 4px;
  text-align: center;
  margin: 124px auto 0 auto;
  cursor: pointer;
}
.offer {
  color: #333;
  font-size: 14px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ffffff;
  text-align: center;
  margin: 30px auto 0 auto;
  cursor: pointer;
}
.rightTopStyle1 {
  width: 60px;
  height: 229px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 30px;
  z-index: 1000;
  position: fixed;
  right: 20px;
  bottom: 120px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.rightBottomStyle1 {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  z-index: 1000;
  position: fixed;
  right: 20px;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.phoneBox {
  position: relative;
  cursor: pointer;
}
.downPhone {
  background: url("./../../../../assets/img/home/phoneBox.png") no-repeat;
  background-size: 100%, 100%;
  width: 306px;
  height: 145px;
  position: absolute;
  right: 40px;
  bottom: -80px;
  z-index: 200;
}
.phoneName {
  font-size: 16px;
  color: #333;
  margin-top: 35px;
}
.phoneNum {
  font-size: 26px;
  color: #333;
  font-weight: 500;
  margin-top: 17px;
}
.cartBox {
  position: relative;
}
.cartContent {
  width: 610px;
  height: 440px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #eeeeee;
  position: absolute;
  right: 100px;
  bottom: -100px;
  color: #333;
  z-index: 200;
}
.cartTitleBg {
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #1c1e2b;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
}
.cratName {
  margin-left: 40px;
}
.styleHeight {
  width: 33px;
  height: 3px;
  background: #fff;
  margin-right: 40px;
  cursor: pointer;
}
.inputBox {
  padding-top: 44px;
  margin: 0 40px;
  box-sizing: border-box;
}
.inputClass {
  margin-bottom: 20px;
}
.selectClass {
  width: 100%;
}
.sendOut {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: #ff855b;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin: 40px auto 0 auto;
}
.ShoppingCart {
  cursor: pointer;
  position: relative;
}
.countNum{
  width: 18px;
  height: 18px;
  background: #F56C6C;
  border-radius: 12px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: #fff;
}
</style>
